<template>
	<!-- 主体内容区域 -->
	<div class="Z_main">
		<!-- 头部区域 -->
		<div class="top">
			<h5>退款</h5>
		</div>
		<!-- 标题导航区域 -->
		<div class="nav">
			<h4>退款订单筛选</h4>
			<!-- 标题右侧内容区域 -->
			<div class="nav_wrap">
				<span class="r-38">提交时间</span>
				<span>
					<el-date-picker v-model="serachList.sechOne" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="getList"
						:disabledDate="disablesDate" />
				</span>
				<span class="l-38 r-38">
					<input type="text" class="ipt" placeholder="请输入订单号,用户账号,昵称" v-model="serachList.sechTwo">
				</span>
				<div class="icon l-x">
					<span class="img">
						<!-- <img src="../img/羽毛球.png" /> -->
						<img src="../assets/pict.png" alt="" />
					</span>
					<span class="icon-p" @click="SearchUsers()">筛选</span>
				</div>
			</div>
		</div>
		<!-- 底部区域 -->
		<div class="bottom">
			<div class="p">
				<h4>订单列表</h4>
			</div>
			<div class="line"></div>
			<!-- 底部表名字段区域 -->
			<ul class="list">
				<li>
					<input type="checkbox">
					<span>订单编号</span>
					<span>用户昵称</span>
					<span>手机号</span>
					<span>课程名称</span>
					<span>订单金额</span>
					<span>提交时间</span>
					<span>处理状态</span>
					<span>处理时间</span>
					<span>操作</span>
				</li>
				<li v-for="(item, index) in person">
					<input type="checkbox" />
					<span>{{ index + 1 }}</span>
					<span>赵进涛</span>
					<span>{{ item.phone }}</span>
					<span>{{ item.name }}</span>
					<span>{{ item.price }}</span>
					<span>{{ item.up_tim }}</span>
					<span>{{ item.state_s }}</span>
					<span>{{ item.up_tim + 1 }}</span>
					<span class="btn">
						<button>查看状态</button>
					</span>
				</li>
			</ul>
			<li class="list-bottom">
				<div class="left">
					<input type="checkbox" />
					<span>全选</span>
					<span class="green">批量导出</span>
				</div>
				<div class="right">
					<span class="num">共400条</span>
					<span class="pages">100条/页</span>
					<div class="page">
						<span>&lt;</span>
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<span>4</span>
						<span>&gt;</span>
					</div>
					<div class="goto">
						<span>前往</span>
						<span class="arc">4</span>
						<span>页</span>
					</div>
				</div>
			</li>
		</div>
	</div>
</template>

<script>
import {
	ref
} from 'vue'
import { odRefund, sechOdRefund } from '../api/api.js'
export default {
	setup() {
		const value = ref('');
		const person = ref([]);
		const _index = ref(0);

		const searchTest = ref('');

		const serachList = ref(
			{
				sechOne: '',
				sechTwo: '',
				sechThree: ''
			}
		)

		const Newperson = ref({
			name: '',
			state_s: '',
			price: '',
			up_tim: '',
			phone: '',
			dispose_tim: '',
			ifFlg: true
		})
		return {
			value,
			person,
			_index,
			searchTest,
			Newperson,
			serachList
		}
	},
	disablesDate(time) {
		const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
		const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
		return time.getTime() <= _maxTime || time.getTime() > _minTime
	},
	// 过载后，自动全部获取刷新
	mounted() {
		this.AllUsers();
	},
	methods: {
		AllUsers() {
			odRefund()
				.then(res => {
					// this.person = res.data.list;
					console.log(res)
					const _data = res.data.list;
					this.person = _data;
					console.log(this.person);
				})
				.catch(err => {
					console.log(err);
				})
		},
		SearchUsers() {
			const sech_one = this.serachList.sechOne
			const sech_two = this.serachList.sechTwo
			const each_data = { sech_one, sech_two }
			sechOdRefund(each_data)
				.then(res => {
					console.log(res.data)
					this.person = res.data.list
				})
				.catch(err => {
					console.log(err)
				})
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.Z_main {
	width: calc(100% - 60px);
	/* height: 100vh; */
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	margin-bottom: 30px;
}

.nav,
.bottom {
	width: calc(100% - 60px);
	padding: 30px;
	background-color: #fff;
}

.nav {
	height: 60px;
	margin-bottom: 20px;
}

.nav>h4 {
	margin-bottom: 10px;
}

.nav_wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.bottom {
	height: 600px;
}

.bottom>.p {
	width: 100%;
	height: 40px;
	line-height: 20px;
}

.line {
	width: 100%;
	height: 25px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}

.list {
	width: 100%;
	height: 503px;
}

.list>li {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 50px;
	font-weight: bold;
}

.list>li:nth-child(1) {
	height: 43px;
}

.list>li>input {
	flex: 1;
}

.list>li>span {
	flex: 1;
	text-align: center;
}

.list>li>input {
	width: 18px;
	height: 18px;
}


.r-38 {
	margin-right: 38px;
}

.l-38 {
	margin-left: 38px;
}

.select {
	width: 120px !important;
}

.ipt {
	width: 220px;
	height: 28px;
	padding: 0 18px;
	border-radius: 8px;
	outline: none;
	border: 2px solid #dcdfe6;
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 76px;
	height: 32px;
	background-color: #38a28a;
	border-radius: 5px;
}

.icon-p {
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

.img {
	width: 20px;
	height: 20px;
}

.img>img {
	width: 100%;
	height: 100%;
}

.l-x {
	margin-left: 231px;
}

.btn>button{
	outline: noen;
	width: 56px;
	height: 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fff;
}
.btn>button:nth-child(1){
	color: #38a28a;
	text-align: center;
}
.list-bottom {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-bottom>input {
	float: left;
}
.list-bottom>.left{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.left>input{
	width: 18px;
	height: 18px;
}
.list-bottom>.left>span{
	margin-left: 18px;
}
.list-bottom>.left>.green{
	color: rgb(56, 162, 138);
}
.list-bottom>.right{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.page{
	width: 215px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.goto{
	width: 128px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.goto>span:nth-child(1){
	margin-right: 15px;
}
.goto>span:nth-child(3){
	margin-left: 15px;
}
.arc{
	width: 48px;
	height: 26px;
	border: 1px solid #8e8e8e;
	border-radius: 4px;
	text-align: center;
	line-height: 26px;
}
.num{
	margin-right: 15px;
}
</style>
